<template>
	<div class="review-content">
		<div class="head">
			<span class="title">
				{{ $t('funds.fund_audit.member_topup_review_detail_title') }}
			</span>
			<div class="right-btn">
				<el-button plain @click="goBack">
					{{ $t('common.back') }}
				</el-button>
			</div>
		</div>
		<div class="main-content detailBoxStyle">
			<div class="review-content">
				<p class="name">{{ $t('funds.fund_audit.title_1') }}</p>
				<div class="review-flex">
					<el-table
						border
						size="mini"
						:data="[1]"
						style="width: 100%"
						:header-cell-style="getRowClass"
					>
						<el-table-column
							align="center"
							:label="$t('funds.fund_audit.register_time')"
							min-width="160"
						>
							<template>
								{{ list.createDt || '-' }}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('funds.fund_audit.last_login_datetime')"
							min-width="160"
						>
							<template>
								{{ list.lastLoginTime || '-' }}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('funds.fund_audit.last_bet_time')"
							min-width="160"
						>
							<template>
								{{ list.lastBetTime || '-' }}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('funds.fund_audit.registry_app_type')"
							min-width="100"
						>
							<template>
								{{
									list && list.deviceType
										? typeFilter(
												list.deviceType,
												'deviceType'
										  )
										: '-'
								}}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('funds.fund_audit.register_ip')"
							min-width="130"
						>
							<template>
								{{ list.registerIp || '-' }}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('funds.fund_audit.ip_attribution')"
							min-width="130"
						>
							<template>
								{{ list.ipAttribution || '-' }}
							</template>
						</el-table-column>

						<el-table-column
							align="center"
							:label="$t('funds.fund_audit.parent_proxy_name')"
							min-width="120"
						>
							<template>
								{{ list.parentProxyName || '-' }}
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
			<div class="review-content">
				<p class="name">{{ $t('funds.fund_audit.title_2') }}</p>
				<div class="review-flex">
					<el-table
						border
						size="mini"
						:data="[1]"
						style="width: 100%"
						:header-cell-style="getRowClass"
					>
						<el-table-column
							align="center"
							:label="$t('funds.user_name')"
						>
							<template>
								{{ list.userName || '-' }}
							</template>
						</el-table-column>
						<el-table-column align="center" label="会员姓名">
							<template>
								{{ list.realName || '-' }}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="
								$t('funds.capital_adjustment.member_nickname')
							"
						>
							<template>
								{{ list.nickName || '-' }}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('common.belong_merchant')"
						>
							<template>
								{{ rowData.merchantName || '-' }}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('common.account_status')"
						>
							<template>
								<span
									v-if="list.loginLockStatus === 1"
									class="disableRgba"
								>
									{{ $t('common.login_lock_status') }}
								</span>
								<span
									v-if="list.gameLockStatus === 1"
									class="lockingRgba"
								>
									{{ $t('common.game_lock_status') }}
								</span>
								<span
									v-if="list.paymentLockStatus === 1"
									class="deleteRgba"
								>
									{{ $t('common.account_lock_status') }}
								</span>
								<span
									v-if="
										list.loginLockStatus === 0 &&
											list.gameLockStatus === 0 &&
											list.paymentLockStatus === 0
									"
									class="normalRgba"
								>
									{{ $t('common.account_status_normal') }}
								</span>
								<span
									v-if="
										list.loginLockStatus === null &&
											list.gameLockStatus === null &&
											list.paymentLockStatus === null
									"
								>
									-
								</span>
							</template>
						</el-table-column>
						<!-- <el-table-column
							align="center"
							:label="$t('funds.vip_level')"
						>
							<template>
								{{
									(list && list.vipLevel) ||
									list.vipLevel === 0
										? list.vipLevel +
										  $t('funds.fund_audit.level')
										: '-'
								}}
							</template>
						</el-table-column> -->
						<el-table-column
							align="center"
							:label="$t('funds.fund_audit.label_name')"
						>
							<template>
								{{ list.labelName || '-' }}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('common.remark')"
							show-overflow-tooltip
						>
							<template>
								{{ list.remark || '-' }}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('funds.fund_audit.bind_bank_card_count')"
						>
							<template>
								{{
									list.bankCardNum || list.bankCardNum === 0
										? list.bankCardNum
										: '-'
								}}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('funds.fund_audit.bind_virtual_count')"
						>
							<template>
								{{
									list.virtualNum || list.virtualNum === 0
										? list.virtualNum
										: '-'
								}}
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
			<div class="review-content">
				<p class="name">
					{{
						$t(
							'funds.fund_audit.member_topup_review_detail_title_4'
						)
					}}
				</p>
				<div class="review-flex">
					<el-table
						border
						size="mini"
						:data="[1]"
						style="width: 100%"
						:header-cell-style="getRowClass"
					>
						<el-table-column
							align="center"
							:label="$t('funds.fund_audit.operator')"
						>
							<template>
								{{ list.operator || '-' }}
							</template>
						</el-table-column>

						<el-table-column
							align="center"
							:label="$t('funds.apply_time')"
						>
							<template>
								{{ list.eventTime || '-' }}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('funds.fund_audit.operator_remark')"
						>
							<template>
								{{ list.operatorRemark || '-' }}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('funds.fund_audit.image_address')"
						>
							<template>
								<span
									v-if="!!list.imageAddress"
									class="text-link"
									@click="lookGame(list.imageAddress)"
								>
									{{ $t('funds.fund_audit.preview_picture') }}
								</span>
								<span v-else>-</span>
							</template>
						</el-table-column>
					</el-table>
					<el-table
						border
						size="mini"
						:data="[1]"
						style="width: 100%"
						:header-cell-style="getRowClass"
					>
						<el-table-column
							align="center"
							:label="$t('funds.fund_audit.adjust_type')"
						>
							<template>
								{{
									list.adjustType || list.adjustType === 0
										? typeFilter(
												list.adjustType,
												'memberPatchAddAdjustType'
										  )
										: '-'
								}}
							</template>
						</el-table-column>
						<!-- <el-table-column
							v-if="list.adjustType == 3"
							align="center"
							:label="$t('funds.fund_audit.activity_type_name')"
						>
							<template>
								{{
									typeFilter(
										list.activityType,
										'activityType'
									)
								}}
							</template>
						</el-table-column>
						<el-table-column
							v-if="list.adjustType == 5"
							align="center"
							:label="$t('funds.fund_audit.welfare_type')"
						>
							<template>
								{{
									list.welfareType || list.welfareType === 0
										? typeFilter(
												list.welfareType,
												'welfareType'
										  )
										: '-'
								}}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('funds.fund_audit.valid_multiple')"
						>
							<template>
								{{
									list.validMultiple ||
									list.validMultiple === 0
										? list.validMultiple +
										  $t('funds.fund_audit.multiple')
										: '-'
								}}
							</template>
						</el-table-column> -->
						<el-table-column align="center" label="返水倍数">
							<template>
								{{
									list.validMultiple ||
									list.validMultiple === 0
										? list.validMultiple
										: '-'
								}}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('funds.fund_audit.order_amount')"
						>
							<template>
								<span style="color: red; font-weight: 600">
									{{
										list.adjustType || list.adjustType === 0
											? handleCurrency(rowData.currency) +
											  handleNumber(
													rowData.currency,
													list.adjustAmount
											  )
											: '-'
									}}
								</span>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
			<div class="review-content">
				<p class="name">{{ $t('funds.fund_audit.audit_info') }}</p>
				<div class="review-flex">
					<div>
						{{ $t('funds.fund_audit.audit_user_1') }}:
						{{ list.audit1Operator || '-' }}
					</div>
					<div>
						{{ $t('funds.fund_audit.audit_time_1') }}:
						{{ list.audit1Time || '-' }}
					</div>
					<div>
						{{ $t('funds.fund_audit.audit_remark_1') }}:
						<span class="txtfeed world_break">
							{{ list.audit1Desc || '-' }}
						</span>
					</div>
				</div>
				<div v-if="list.audit2Operator" class="review-flex">
					<div>
						{{ $t('funds.fund_audit.audit_user_2') }}:
						{{ list.audit2Operator || '-' }}
					</div>
					<div>
						{{ $t('funds.fund_audit.audit_time_2') }}:
						{{ list.audit2Time || '-' }}
					</div>
					<div>
						{{ $t('funds.fund_audit.audit_remark_2') }}:
						<span class="txtfeed world_break">
							{{ list.audit2Desc || '-' }}
						</span>
					</div>
				</div>
			</div>
		</div>
		<image-viewer
			v-if="imgVisible"
			:visible.sync="imgVisible"
			:url-list="bigImage"
		/>
		<!-- <el-dialog
			:title="$t('funds.fund_audit.picture')"
			:visible.sync="imgVisible"
			:destroy-on-close="true"
			class="imgCenter"
		>
			<div class="img-box">
				<img v-lazy="bigImage" />
			</div>
		</el-dialog> -->
	</div>
</template>

<script>
import list from '@/mixins/list'

export default {
	mixins: [list],
	props: {
		// 审核 true 仅返回 false
		type: Boolean,
		rowData: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			list: {},
			imgVisible: false,
			bigImage: ''
		}
	},
	created() {
		this.getInfo()
	},
	methods: {
		lookGame(val) {
			this.imgVisible = true
			this.bigImage = val.split(',')
		},
		goBack() {
			this.$emit('goBack')
		},
		getInfo() {
			const params = {
				id: this.rowData.id,
				merchantId: this.rowData.merchantId,
				userType: 1
			}
			this.$api
				.memberArtificialPatchAccountAddAuditAuditDetail(params)
				.then((res) => {
					this.loading = false
					const { code, data, msg } = res || {}
					if (code === 200) {
						this.list = data
					} else {
						this.$message({
							message: msg,
							type: 'error'
						})
					}
				})
		}
	}
}
</script>

<style lang="scss" scoped>
.txtfeed {
	width: 160px;
	table-layout: fixed;
	word-break: break-all;
	overflow: hidden;
}
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
.review-content {
	margin: 24px 16px 20px 16px;
	color: #666666;
	.review-table {
		width: 100%;
		text-align: center; /*文本居中*/
		border-collapse: collapse; /*表格的边框合并，如果相邻，则共用一个边框*/
		border-spacing: 0;
		border: 1px solid rgba(238, 230, 230, 0.562);
		td {
			border-right: 1px solid rgba(238, 230, 230, 0.562);
			border-bottom: 1px solid rgba(228, 220, 220, 0.562);
			height: 36px;
			font-size: 12px;
			line-height: 36px;
			width: 13%;
		}
		.td-title {
			width: 7%;
			background: rgb(239, 239, 239);
		}
	}
	.head {
		height: 70px;
		line-height: 70px;
		width: 100%;
		background: #000;
		border-radius: 2px;
		padding: 0 30px;
		.title {
			font-weight: 600;
			color: rgb(192, 190, 190);
		}
		.right-btn {
			float: right;
		}
	}
	.main-content {
		.review-content {
			min-height: 150px;
			border-top: 0;
			padding: 30px;
			.name {
				font-weight: 600;
			}
			.review-flex {
				position: relative;
				width: 100%;
				margin-top: 15px;
				div {
					display: inline-block;
					width: 24%;
				}
			}
		}
		.more-height {
			height: 200px;
		}
	}
	.reason {
		word-break: break-all;
	}
}
</style>
